<template>
  <div class="" @click="clickHandle('test click', $event)">
    <img :src="userInfo.avatarUrl" alt="" class='userInfo_img'>
    <div class="center">
      欢迎来自<span>{{userInfo.country}}</span>: {{userInfo.province}}: {{userInfo.city}}的{{userInfo.nickName}}来到企点
      <!-- <h3 class='left userInfo_nickName'>nickName: {{userInfo.nickName}}</h3> -->
      <!-- <p class='left userInfo_gender'>gender: {{userInfo.gender==1 ? '男': '女'}}</p> -->
      <!-- <p class='left userInfo_province'>province: {{userInfo.province}}</p>
      <p class='left userInfo_city'>city: {{userInfo.city}}</p>
      <p class='left userInfo_country'>country: {{userInfo.country}}</p> -->
    </div>
    <button open-type="openSetting" class='openSettings' @click='openSetting'>打开授权设置页</button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  data () {
    return {
      motto: 'Hello World'
    }
  },
  components: {
  },
  beforeCreate () {
  },
  onShow () {
    this.getSetting()
  },
  onLoad () {
  },
  activated () {
  },
  deactivated () {
  },
  created () {
    // this.login()
  },
  computed: {
    ...mapGetters({
      userInfo: 'getUserInfo'
    })
  },
  methods: {
    ...mapActions([
      'updateUserInfo'
    ]),
    // 用户权限设置
    openSetting () {
      wx.openSetting({
        success (res) {
          // res.authSetting = {
          //   "scope.userInfo": true,
          //   "scope.userLocation": true
          // }
        }
      })
    },

    // 获取用户权限
    getSetting  () {
      let ref = this
      wx.getSetting({
        success: (res) => {
          // scope.userInfo 用户信息
          // scope.userLocation 地理位置
          // scope.address 通讯地址
          // scope.invoiceTitle 发票抬头
          // scope.werun 微信运动步数
          // scope.record 录音功能
          // scope.writePhotosAlbum 保存到相册
          // scope.camera 摄像头
          if (!res.authSetting['scope.userInfo']) {
            ref.bindViewTap()
          } else {
            ref.getUserInfo()
          }
        },
        fail: (res) => {}
      })
    },

    // 获取用户基本信息
    getUserInfo () {
      let ref = this
      wx.getUserInfo({
        withCredentials: true,
        success: (res) => {
          ref.updateUserInfo({userInfo: JSON.stringify(res)})
          ref.updateUserInfo(res.userInfo)
          ref.login()
          console.log(ref.userInfo)
          // var userInfo = res.userInfo
          // var nickName = userInfo.nickName
          // var avatarUrl = userInfo.avatarUrl
          // var gender = userInfo.gender //性别 0：未知、1：男、2：女
          // var province = userInfo.province
          // var city = userInfo.city
          // var country = userInfo.country
        },
        fail (res) {
          console.log(ref)
          // 前往授权页面
          ref.bindViewTap()
        }
      })
    },

    // 登录
    login () {
      let ref = this
      console.log(ref.userInfo.userInfo)
      if (!ref.userInfo.userInfo) {
        console.log(123)
        return false
      }
      wx.login({
        success: (res) => {
          ref.updateUserInfo(res.code)
          this.$fly.request({
            method: 'post',
            url: 'https://www.lalytian.top/easymall/frontend/web/index.php?r=user/codesession',
            body: {
              code: res.code,
              userInfo: ref.userInfo.userInfo
            }
          }).then(res => {
            let re = res.data
            if (res.state === 1) {
              ref.updateUserInfo(re.data)
              console.log('openId', re.data)
            }
            console.log('token', res)
          })
          // 将值传递给后端系统，然后获取token密钥
        },
        fail: (res) => {
          console.log(res)
        }
      })
    },

    bindViewTap () {
      const url = '/pages/authorizing/main'
      wx.navigateTo({ url })
    },

    clickHandle (msg, ev) {
      console.log('clickHandle:', msg, ev)
    }
  }
}
</script>

<style>
.userInfo_img{
  margin: 0 auto;
  display: block;
  width:100px;
  height: 100px;
  border-radius: 10px;
}
.center{
  margin: 60px 60px 0;
  color:#17d540;
  text-align: center;
}
.left{
  text-align: left;
}
.openSettings{
  margin: 200px 60px 0;
  color:#17d540;
  font-size:18px;
  border:1px solid #bff5cb
}
</style>
